<template>
  <div class="postList">

    <!-- 筛选表单 -->
    <el-form class="searchForm" label-width="70px">
      <el-form-item label="原因">
        <el-select v-model="searchForm.reason" size="mini" placeholder="请选择原因">
          <el-option
            v-for="item in reasonList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" size="mini" placeholder="请选择原因">
          <el-option
            v-for="item in reportStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="searchForm.createDate"
          type="daterange"
          size="mini"
          start-placeholder="请选择开始日期"
          end-placeholder="请选择结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button-group class="button-group">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">筛选</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="handleResetSearchForm">重置</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :key="key"
      :data="reportList"
      :header-cell-style="{'text-align': 'center','background': 'rgb(248 248 248)'}"
      :cell-style="{'text-align': 'center'}"
    >
      <el-table-column label="编号" prop="id" />
      <el-table-column label="用户" prop="userInfo.nickName" />
      <el-table-column label="帖子" prop="post.title" />
      <el-table-column label="原因">
        <template slot-scope="scope">
          <el-tag>{{ reasonList[scope.row.reason - 1].label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="!scope.row.isEditing" :type="scope.row.status === 1 ? 'primary' : 'success'">{{ reportStatusList[scope.row.status - 1].label }}</el-tag>
          <el-select v-else v-model="scope.row.status" size="mini" placeholder="请选择状态">
            <el-option
              v-for="item in reportStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" />
      <el-table-column label="创建日期" prop="createDate" />
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button-group class="button-group">
            <el-button v-if="scope.row.isEditing" type="primary" size="mini" :loading="isButtonLoading" @click="handleSubmit(scope.row)">确认</el-button>
            <el-button v-else type="warning" size="mini" :loading="isButtonLoading" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" :loading="isButtonLoading" @click="handleDelete(scope.row)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10,15,20,25,30]"
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align: right;margin-right: 10px;"
      @current-change="handleChange"
      @size-change="handleSizeChange"
    />

  </div>
</template>

<script>
import { getReportVoList, updateReport, deleteReport } from '@/api/report'
import { getPostList } from '@/api/post'
import { getDictList } from '@/api/dict'

export default {
  name: 'PostList',
  data() {
    return {
      key: 1,
      reportList: [],
      userInfoList: [],
      postList: [],
      total: undefined,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        reason: undefined,
        status: undefined,
        createDate: undefined
      },
      dialogTitle: undefined,
      isDialogVisible: false,
      dialogType: undefined,
      isButtonLoading: false,
      reportInfo: {},
      isReportInfoDialogVisible: false,
      reasonList: [],
      reportStatusList: []
    }
  },
  beforeMount() {
    this.getReportStatusList()
    this.getReasonList()
    this.getReportVoList()
  },
  methods: {
    async getReportStatusList() {
      const { data } = await getDictList({
        searches: [
          {
            key: 'type',
            rule: '=',
            value: 'report_status'
          }
        ]
      })
      this.reportStatusList = data
    },
    async getReasonList() {
      const { data } = await getDictList({
        searches: [
          {
            key: 'type',
            rule: '=',
            value: 'report_reason'
          }
        ]
      })
      this.reasonList = data
    },
    handleSearch() {
      this.pageNum = 1
      this.pageSize = 10
      this.getReportVoList()
    },
    handlePostReplyDetail(row) {
      this.reportInfo = row
      this.isReportInfoDialogVisible = true
    },
    handleDelete(row) {
      this.$confirm(`确定要删除编号为${row.id}的数据吗?`, '提示').then(() => {
        this.isButtonLoading = true
        deleteReport([row.id]).then(() => {}, () => {}).finally(() => {
          this.isButtonLoading = false
          this.getReportVoList()
        })
      }, () => {})
    },
    handleSubmit(row) {
      this.isButtonLoading = true
      updateReport(row).then(() => {}, () => {}).finally(() => {
        this.isButtonLoading = false
        row.isEditing = true
        this.key++
        this.getReportVoList()
      })
    },
    handleEdit(row) {
      row.isEditing = true
      this.key++
    },
    handleResetSearchForm() {
      this.searchForm = {
        reason: undefined,
        status: undefined,
        createDate: undefined
      }
      this.getReportVoList()
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getReportVoList()
    },
    handleChange(value) {
      this.pageNum = value
      this.getReportVoList()
    },
    async getReportVoList() {
      const searchParam = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searches: [
          {
            key: 'r.reason',
            rule: '=',
            value: this.searchForm.reason
          },
          {
            key: 'r.status',
            rule: '=',
            value: this.searchForm.status
          },
          {
            key: 'r.create_date',
            rule: 'scope',
            value: this.searchForm.createDate
          }
        ]
      }
      const { data: postReplyData } = await getReportVoList(searchParam)
      const { data: postData } = await getPostList()
      this.postList = postData
      this.total = postReplyData.total
      this.reportList = postReplyData.list
    }
  }
}
</script>

<style lang="scss" scoped>
.postList {
  .searchForm {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    .el-form-item {
      width: 33%;
      margin-left: 5px;
      .el-select {
        width: 100%;
      }
    }
    .button-group {
      margin-left: 10px;
      width: 100%;
      justify-content: left;
    }
  }
  .button-group {
    display: flex;
    justify-content: center;
    .el-button {
       margin-right: 10px;
    }
  }
}
</style>
